<template>
  <div class="">
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <heading grade="1">招商计划</heading>
      <div v-if="list.list && list.list.length>0">
        <div class="clearfix search-bar">
          <el-button class="orange-btn" @click="edit()">新增招商计划</el-button>
        </div>
        <template>
          <el-table
            :data="list.list"
            stripe
            style="width: 100%">
            <el-table-column
              prop="matchName"
              label="赛事名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="sponsorName"
              label="招商方案名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="money"
              label="招商金额">
              <template scope="scope">
                {{scope.row.money/1000000 + '万元'}}
              </template>
            </el-table-column>
            <el-table-column
              label="招商状态">
              <template scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  on-color="#00bb90"
                  off-color="#dddddd"
                  on-text="开"
                  off-text="关"
                  on-value="0"
                  off-value="1"
                  @change="handleChangeState(scope)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="auditStatus"
              label="审核状态">
              <template scope="scope">
                {{scope.row.auditStatus | sponsorStatus}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row.id)" :disabled="scope.row.auditStatus == 1">修改</el-button>
                <el-button type="text" size="small" @click="del($event,scope.row.id,scope.row.status)" :disabled="scope.row.auditStatus == 1">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="list.total"
            v-bind="getPaginationProps(list)"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            >
          </el-pagination>
        </template>
      </div>
      <placeholder v-else-if="list.loaded" text="暂时没有招商计划哦" src="/static/images/sponsor/nodata_business.png">
        <el-button class="orange-btn" @click="edit()" slot="button">新增招商计划</el-button>
      </placeholder>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from 'api/sponsor'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      list: 'sponsor_business_list',
      dict: 'sponsor_dict'
    })
  },
  data () {
    let isCertify
    return {
      isCertify,
      query: this.getQuery()
    }
  },
  created () {
    this.$store.dispatch('sponsor_dict', 'match')
  },
  methods: {
    handleChangeState (item) { // 开关
      if (item.row.status === '1') {
        this.$confirm('确定要关闭招商计划吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('sponsor_business_changestate', item)
        }).catch(() => {
          this.$store.commit('SPONSOR_BUSINESS_CHANGESTATE', {
            data: false,
            params: item
          })
        })
      } else {
        this.$store.dispatch('sponsor_business_changestate', item)
      }
    },
    edit (id) { // 编辑方法
      if (!id) {
        if (this.dict.match.data.length === 0) {
          this.$confirm('您当前没有赛事,无法新建招商方案,快去新建赛事吧！', '提示', {
            confirmButtonText: '新建赛事',
            type: 'warning'
          }).then(() => {
            this.$router.push({path: '/service/release'})
          }).catch(() => {
          })
          return
        }
        this.$router.push({path: '/sponsor/business/add'})
      } else {
        this.$router.push({path: '/sponsor/business/edit/' + id})
      }
    },
    del (event, id, status) { // 删除方法
      this.$confirm('确定要删除数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行删除接口
        api.business_del({
          id: id
        }, {context: event.target}).then(res => {
          this.fetch(this.query)
        }, () => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
      })
    },
    fetch (query) { // 分页，和搜索表单发生提交时触发事件
      this.$store.dispatch('sponsor_business_list', query)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~styles/var.scss';
  .orange-btn{
    background: $orange;
    border-color: $orange;
    color: #ffffff;
    margin:20px 0px;
    &:hover {
      color: $orange;
      background: #ffffff;
    }
  }
</style>
